<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/12/19
  Time: 18:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.uni.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户信息中心</title>
    <link rel="icon" href="img/weblogo.png" >
    <link rel="stylesheet" type="text/css" href="bootstrap-5.1.3-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="css/ycc.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0-min.js"></script>
    <script type="text/javascript" src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/card_user_buy_record.js"></script>
</head>
<body>
<%
    User user = (User) session.getAttribute("userInfo");
%>

<div class="row div-card">
    <div class="accordion accordion-flush" id="accordion-buy-recored">
        <h5 class="text-center h-title-black"><i class="bi bi-clock-history"></i>订单记录 共 ${sessionScope.orderInfo.size()} 条</h5>
        <c:if test="${sessionScope.orderInfo.size() <= 0}">
            <h5 class="mt-2 text-center">您购买的订单记录为空.</h5>
        </c:if>

        <c:forEach items="${sessionScope.orderInfo}" var="order">
            <div class="accordion-item">
                <h2 class="accordion-header" id="flush-headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                        订单时间: ${order.time} 订单号:${order.id} </span>
                    </button>
                </h2>
                <!-- 订单卡片-->
                <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordion-buy-recored">
                    <div class="accordion-body">
                            <div class="card-body">
                                <table class="table table-light table-order">
                                    <thead>
                                    <tr>
                                        <th scope="col">图片</th>
                                        <th scope="col">商家</th>
                                        <th scope="col">商品名称</th>
                                        <th scope="col">商品类型</th>
                                        <th scope="col">购买数量</th>
                                        <th scope="col">价格</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th scope="row">
                                            <img src="${order.commodity.img}">
                                        </th>
                                        <td>${order.user.name}</td>
                                        <td>${order.commodity.name}</td>
                                        <td>${order.commodity.info}</td>
                                        <td>1</td>
                                        <td>${order.commodity.price}元</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div>
                                    <button id="bt-delete-order" class="btn btn-outline-danger w-100" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-cid="${order.commodity.id}">删除订单</button>
                                </div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="staticBackdropLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    温馨提示
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                是否确认删除？
            </div>
            <div class="modal-footer">
                <button id="btn-modal-cancel" type="button" class="btn btn-danger" data-bs-dismiss="modal">手滑了</button>
                <button id="btn-modal-delete" type="button" class="btn btn-success" data-bs-toggle="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<button id="btn-to-modal-delete" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-delete-ok" hidden>跳转到删除成功的模态框</button>
<div class="modal fade" id="modal-delete-ok" tabindex="-1" aria-labelledby="modal-h-buy-ok" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="modal-h-buy-ok">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    温馨提示
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h5 class="display-5 text-success text-center">
                    删除成功!
                    <i class="bi bi-check-circle"></i>
                </h5>
            </div>
        </div>
    </div>
</div>
</body>
</html>
